<!--
*@Author: QWP
*@Description: 应急首页的分段控制器
*@Date: 2024-07-18 14:49:24
-->
<template>
  <a-list :grid="{ column: data.length }" 
    :data-source="data">
    <template #renderItem="{ item }">
      <a-list-item style="padding: 0;">
        <a-row justify="center" 
          style="height: 40px; 
            line-height: 40px; 
            border-radius: 6px;
            cursor: pointer"
          :style="{ 
            'background': activeKey == item.id ? state.levelColor.segmentedAColor : state.levelColor.segmentedDColor,
            'color': activeKey == item.id ? '#fff' : '#333'
          }"
          @click="itemClick(item)">
          {{ item['label'] }}
        </a-row>
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, onMounted } from 'vue' 
import { useEmergencyStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { getColor } from '@/views/index/emergencyIndex/data'
import { PanelProps } from 'ant-design-vue/es/collapse/commonProps';
interface Props {
  data: any[],
  activeKey: string
}
const props = defineProps<Props>()

const emits = defineEmits(['update:activeKey', 'click'])

const { level } = storeToRefs(useEmergencyStore())

const state = reactive({
  levelColor: computed(() => getColor(level.value))
})

// 项的点击事件
const itemClick = (item) => {
  emits('update:activeKey', item.id)
  emits('click', item)
}
</script>

<style lang='scss' scoped>
</style>